<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="角色列表"
      row-key="id"
      :indent="30"
      :columns="columns"
      :request-api="urlList"
      :initParam="where"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="toDetail(0)" v-auth="'create'">{{ $t("common.add") }}</el-button>
      </template>
      <!-- 菜单图标 -->
      <template #rate="scope"> 1 {{ scope.row.unit.name }} * {{ scope.row.value }} = 1 {{ scope.row.rate.name }}</template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="Menu" v-auth="'auth'" @click="authRole(scope.row)">
          {{ $t("system.role.auth") }}
        </el-button>
        <el-button type="primary" link :icon="EditPen" @click="toDetail(scope.row.id)" v-auth="'modify'">
          {{ $t("common.edit") }}
        </el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteRole(scope.row)" v-auth="'delete'">
          {{ $t("common.del") }}
        </el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="menuMange">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ColumnProps } from "@/components/ProTable/interface";
import { fieldList as urlList, fieldDel as urlDelete, valStatus as UrlStatus } from "@/api/modules/common";
import { Delete, EditPen, CirclePlus, Menu } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
import { useAuthButtons } from "@/hooks/useAuthButtons";

import ProTable from "@/components/ProTable/index.vue";
import { useI18n } from "vue-i18n";

const router = useRouter();
const route = useRoute();
const { BUTTONS } = useAuthButtons();
const { t } = useI18n();
const proTable = ref();

const where = { config_id: route.params.id };
console.log(where);
// 跳转详情页
const toDetail = (id: number) => {
  if (id) return router.push(`/common/config/field/modify/${id}`);
  if (where.config_id) {
    return router.push(`/common/config/group/create/${where.config_id}`);
  }

  return router.push(`/common/config/field/create`);
};

const statusEnum = [
  { label: t("common.normal"), value: 10 },
  { label: t("common.disable"), value: 20 }
];

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "id", label: "ID", width: 120 },
  { prop: "group.name", label: t("common.group.name") },
  { prop: "label", label: t("common.field.label"), search: { el: "input" } },
  { prop: "field", label: t("common.field.field") },
  { prop: "input", label: t("common.field.input") },
  { prop: "value", label: t("common.field.value") },
  {
    prop: "status",
    label: t("common.status"),
    width: 100,
    search: { el: "select" },
    enum: statusEnum,
    render: scope => {
      return (
        <>
          {BUTTONS.value.status ? (
            <el-select v-model={scope.row.status}>
              <el-option
                value={statusEnum[0].value}
                disabled={statusEnum[0].value == scope.row.status}
                label={statusEnum[0].label}
                onClick={() => {
                  changeStatus(scope.row.id, statusEnum[0].value);
                }}
              />
              <el-option
                value={statusEnum[1].value}
                disabled={statusEnum[1].value == scope.row.status}
                label={statusEnum[1].label}
                onClick={() => {
                  changeStatus(scope.row.id, statusEnum[1].value);
                }}
              />
            </el-select>
          ) : (
            <el-tag type={scope.row.status == 10 ? "success" : "danger"}>
              {scope.row.status == 10 ? t("common.normal") : t("common.disable")}
            </el-tag>
          )}
        </>
      );
    }
  },
  { prop: "operation", label: t("common.operation"), width: 250, fixed: "right" }
];

// 删除菜单（示例、根据自己后端接口来）
const deleteRole = async (params: Menu.MenuOptions) => {
  await useHandleData(urlDelete, { id: params.id }, `删除【${params.title}】换算`);
  proTable.value.getTableList();
};
const changeStatus = async (id, status) => {
  await useHandleData(UrlStatus, { id, status }, "是否变更");
  proTable.value.getTableList();
};
</script>
